package tech.aistar.controller;

import tech.aistar.entity.Phone;
import tech.aistar.entity.PhoneType;
import tech.aistar.entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @Author: lya
 * @Description: 本类的作用描述:
 * @CreateDate: 2019/9/5
 * @Version: 1.0
 */
@WebServlet("/phone/indexView")
public class PhoneIndexViewAction extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置文档类型
        resp.setContentType("text/html");
        //设置编码
        resp.setCharacterEncoding("UTF-8");
        //获取文档输出流
        PrintWriter out = resp.getWriter();

        //获取手机信息
        List<Phone> phoneList = (List<Phone>) req.getAttribute("phoneList");


        //获取会显的数据
        String searchName = (String) req.getAttribute("name");

        //获取手机类型信息
        List<PhoneType> phoneTypeList = (List<PhoneType>) req.getAttribute("phoneTypeList");
        /**对应PhoneIndexAction类里的req.setAttribute("phoneTypeList",phoneTypeList);
         * req.setAttribute()往request作用域里放
         * req.setAttribute()从request作用域里取*/

//        Phone phone = (Phone) req.getAttribute("phone");
//        PhoneType phoneType = (PhoneType) req.getAttribute("phoneType");


        //从session作用域获取user
        User user = (User) req.getSession().getAttribute("user");

        //Phone phone = (Phone) req.getAttribute("phone");
        out.println("<!DOCTYPE html>");
        out.println("<html lang='en'>");
        out.println("<head>");
        out.println("<meta charset='UTF-8'>");
        out.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
        out.println("<meta http-equiv='X-UA-Compatible' content='ie=edge'>");
        out.println("<title>手机商城</title>");
        out.println("<link rel='stylesheet' href='" + req.getContextPath() + "/plugins/bootstrap/css/bootstrap.css' type='text/css'>");
        out.println("<link rel='stylesheet' href='" + req.getContextPath() + "/css/phone.css' type='text/css'>");
        out.println("</head>");

        out.println("<body>");
        out.println("<!--轮播begin-->");
        out.println("<div class='container-fluid' id='lunbo'>");
        out.println("   <div class='row'>");
        out.println("       <div id='myCarousel' class='carousel slide'>");

        out.println("           <ol class='carousel-indicators'>");
        out.println("               <li data-target='#myCarousel' data-slide-to='0' class='active'>  </li>");
        out.println("               <li data-target='#myCarousel' data-slide-to='1'>  </li>");
        out.println("               <li data-target='#myCarousel' data-slide-to='2'>  </li>");
        out.println("           </ol>");

        out.println("           <div class='carousel-inner'>");
        out.println("               <div class='item active'>");
        out.println("                   <img src='" + req.getContextPath() + "/imgs/advert1.jpg' alt='First slide'>");
        out.println("               </div>");
        out.println("               <div class='item'>");
        out.println("                   <img src='" + req.getContextPath() + "/imgs/advert2.jpg' alt='Second slide'>");
        out.println("               </div>");
        out.println("               <div class='item'>");
        out.println("                   <img src='" + req.getContextPath() + "/imgs/advert3.jpg' alt='Third slide'>");
        out.println("               </div>");
        out.println("           </div>");

        out.println("           <a class='carousel-control left' href='#myCarousel' data-slide='prev'><span _ngcontent-c3='' aria-hidden='true' class='glyphicon glyphicon-chevron-left'></span></a>");
        out.println("           <a class='carousel-control right' href='#myCarousel' data-slide='next'><span _ngcontent-c3='' aria-hidden='true' class='glyphicon glyphicon-chevron-right'></span></a>");
        out.println("       </div>");
        out.println("   </div>");
        out.println("</div>");
        out.println("<!--轮播end-->");

        out.println("<!-- 组合框begin -->");
        out.println("<div class='container-fluid' style='margin-top:20px;margin-bottom:20px'>");
        out.println("   <div class='row'>");
        out.println("<!-- 下拉框begin -->");
        out.println("       <div class='col-md-3'>");
        out.println("           <select class='form-control' id='phoneType' onchange='changeType(this)'>");
        out.println("               <option value='-1'>===请您选择手机类型===</option>");
        //为了数据的回显
        Integer tid = (Integer) req.getAttribute("type_id");

        //手机的类型
        for (PhoneType t : phoneTypeList) {
            if (t.getId().equals(tid)) {
                out.println("               <option selected value='" + t.getId() + "'>" + t.getTypeName() + "</option>");
            } else {
                out.println("               <option value='" + t.getId() + "'>" + t.getTypeName() + "</option>");
            }
        }
        out.println("           </select>");
        out.println("       </div>");
        out.println("<!-- 下拉框end -->");

        out.println("<!-- 搜索框begin -->");
        out.println("       <div class='col-md-3'>");
        out.println("           <div class='input-group'>");
        out.println("               <input type='text' class='form-control' id='searchName' value='" + searchName + "'>");
        out.println("               <span class='input-group-btn'>");
        out.println("                   <button class='btn btn-default' type='button' onclick='selectAll()'>查询</button>");
        out.println("               </span>");
        out.println("           </div>");
        out.println("       </div>");
        out.println("<!-- 搜索框end -->");
        if (null != user && user.getPower() == 0) {
            out.println("<!-- 添加,删除按钮begin -->");
            out.println("       <div class='col-md-5'>");
            out.println("           <button type='button' class='btn btn-info' data-toggle='modal' data-target='#addModal'>添加</button>&nbsp;&nbsp;");
            out.println("           <button type='button' class='btn btn-danger' onclick='delAny()'>删除</button>");
            out.println("       </div>");
            out.println("<!-- 添加,删除按钮end -->");
        }
        out.println("   </div>");
        out.println("</div>");
        out.println("<!-- 组合框end -->");

        out.println("<!--添加手机模态框begin-->");
        out.println("<div class='modal fade' id='addModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>");
        out.println("   <div class='modal-dialog'>");
        out.println("       <div class='modal-content'>");
        out.println("           <div class='modal-header'>");
        out.println("               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>");
        out.println("               <h4 class='modal-title' id='myModalLabel'>添加手机  </h4>");
        out.println("           </div>");
        out.println("           <div class='modal-body'>");
        out.println("           <!--表单登录-->");
        out.println("           <form class='form-horizontal' action='"+req.getContextPath()+"/phone/add' method='post' role='form'>");
//        out.println("               <div class='form-group'>");
//        out.println("                   <label for='inputfile' class='col-sm-2 control-label'>添加封面  </label>");
//        out.println("                   <div class='col-sm-offset-2 col-sm-10'>");
//        out.println("                       <input type='file' id='inputfile'>");
//        out.println("                       <p class='help-block'>请选择手机封面  </p>");
//        out.println("                   </div>");
//        out.println("               </div>");
        out.println("               <div class='form-group'>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机类型  </label>");
        out.println("                   <div class='col-md-3'>");
        out.println("                       <select class='form-control' name='typeId' onchange='changeType(this)'>");
        out.println("                           <option value='-1'>请您选择手机类型  </option>");
        for (PhoneType t : phoneTypeList) {
            out.println("               <option value='" + t.getId() + "'>" + t.getTypeName() + "</option>");
        }
        out.println("                       </select>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group has-feedback'>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机名称  </label>");
        out.println("                   <div class='col-sm-10'>");
        out.println("                       <input type='text' class='form-control' name='name' placeholder='请输入名称'>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group has-feedback'>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机价格  </label>");
        out.println("                   <div class='col-sm-10'>");
        out.println("                       <input type='text' class='form-control' name='price' placeholder='请输入价格'>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group has-feedback'>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>图片路径  </label>");
        out.println("                   <div class='col-sm-10'>");
        out.println("                       <input type='text' class='form-control' name='url' placeholder='请输入图片路径'>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group has-feedback'>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机描述  </label>");
        out.println("                   <div class='col-sm-10'>");
        out.println("                       <input type='text' class='form-control' name='intro' placeholder='请简单描述一下...'>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group '>");
        out.println("                   <label for='firstname' class='col-sm-2 control-label'>是否包邮  </label>");
        out.println("                   <div class='col-md-6'>");
        out.println("                       <label class='radio-inline'>");
        out.println("                           <input type='radio' name='free' value='1' checked>包邮  </label>");
        out.println("                       <label class='radio-inline'>");
        out.println("                           <input type='radio' name='free' value='0'>不包邮  </label>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("               <div class='form-group'>");
        out.println("                   <div class='col-sm-offset-3 col-sm-10'>");
        out.println("                       <button type='submit' class='btn btn-info' style='margin-right: 100px'>确认添加  </button>");
        out.println("                       <button type='button' class='btn btn-danger'>取消添加  </button>");
        out.println("                   </div>");
        out.println("               </div>");
        out.println("           </form>");
        out.println("       </div>");
        out.println("   </div>  <!-- /.modal-content -->");
        out.println("</div>  <!-- /.modal -->");
        out.println("</div>");
        out.println("<!--添加手机信息模态框end-->");

        out.println("<!--缩略图begin-->");
        out.println("<div class='container-fluid'>");
        out.println("<div class='row' id = 'phone'>");
        //非空判断
        if (null != phoneList && phoneList.size() > 0) {
            //遍历数据库中的数据展示到页面上
            for (int i = 0; i < phoneList.size(); i++) {
                if (phoneList.get(i).getStatus() == 1) {
                    out.println("<div class='col-md-3'>");
                    out.println("   <div class='thumbnail'>");
                    if (null != user && user.getPower() == 0) {
                        out.println("<input type='checkbox' value='"+phoneList.get(i).getId() + "'name='cks'>");
                    }
//                    out.println("       <a href='"+req.getContextPath()+"/nav/phone/detail?phone_id="+phoneList.get(i).getId()+"'><img src='" + phoneList.get(i).getUrl() + "' alt='通用的占位符缩略图'></a>");
                    out.println("       <a href='"+req.getContextPath()+"/phone/detail?id="+phoneList.get(i).getId()+"'><img src='" + phoneList.get(i).getUrl() + "' alt='通用的占位符缩略图'></a>");
                    out.println("       <div class='caption' style='overflow:hidden'>");
                    out.println("           <h3 align='center' class='text-success'>" + phoneList.get(i).getName() + "</h3>");
                    out.println("           <div>");
                    out.println("               <span style='Color: red;margin-left:5px;float: left;'>¥" + phoneList.get(i).getPrice() + "</span><span style='Color: yellow;margin-left:10px;float: left;'>" + phoneList.get(i).getFree() + "</span><br>");
                    out.println("           </div>");
                    out.println("           <p style='text-align:center; overflow:initial'>" + phoneList.get(i).getIntro() + "</p>");
                    if (null != user && user.getPower() == 0) {
                        out.println("<!-删除和编辑图标begin-->");
                        out.println("           <p style='float:left'>");
                        out.println("               <a href='" + req.getContextPath() + "/phone/del/one?id=" + phoneList.get(i).getId() + "' class='text-danger'>");
                        out.println("                   <span class='glyphicon glyphicon-trash'></span>");
                        out.println("               </a>");
                        out.println("           </p>");
                        out.println("           <p style='float:right'>");
                        out.println("               <a href='" + req.getContextPath() + "/phone/update?id="+phoneList.get(i).getId()+"' class='text-warning'>");
                        out.println("                   <span class='glyphicon glyphicon-edit' data-toggle='modal' data-target='#updatePhone'></span>");
                        out.println("               </a>");
                        out.println("           </p>");
                        out.println("<!-删除和编辑图标end-->");
                    }
                    out.println("       </div>");
                    out.println("   </div>");
                    out.println("</div>");
                }
            }
        }
        out.println("</div>");
        out.println("</div>");
        out.println("<!--缩略图end-->");


//        out.println("<!--修改手机信息模态框begin-->");
//        out.println("<div class='modal fade' id='updatePhone' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>");
//        out.println("   <div class='modal-dialog'>");
//        out.println("       <div class='modal-content'>");
//        out.println("           <div class='modal-header'>");
//        out.println("               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>");
//        out.println("               <h4 class='modal-title' id='myModalLabel'>修改手机  </h4>");
//        out.println("           </div>");
//        out.println("           <div class='modal-body'>");
//        out.println("           <!--表单登录-->");
//        out.println("           <form class='form-horizontal' action='"+req.getContextPath()+"/phone/add' method='post' role='form'>");
//        out.println("               <div class='form-group'>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机类型  </label>");
//        out.println("                   <div class='col-md-3'>");
//        out.println("                       <select class='form-control' id='phoneType' onchange='changeType(this)'>");
//        out.println("                           <option value='-1'>请您选择手机类型  </option>");
////        Integer id = (Integer) req.getAttribute("id");
//        out.println("                           <option selected value='" + phoneType.getId() + "'>" + phoneType.getTypeName() + "</option>");
//        out.println("                       </select>");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group has-feedback'>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机名称  </label>");
//        out.println("                   <div class='col-sm-10'>");
//        out.println("                       <input type='text' class='form-control' id='firstname' value='"+phone.getName()+"' >");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group has-feedback'>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>图片路径  </label>");
//        out.println("                   <div class='col-sm-10'>");
//        out.println("                       <input type='text' class='form-control' id='firstname' value='"+phone.getUrl()+"'>");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group has-feedback'>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机价格  </label>");
//        out.println("                   <div class='col-sm-10'>");
//        out.println("                       <input type='text' class='form-control' id='firstname' valur='"+phone.getPrice()+"'>");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group has-feedback'>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>手机描述  </label>");
//        out.println("                   <div class='col-sm-10'>");
//        out.println("                       <input type='text' class='form-control' id='firstname' value='"+phone.getIntro()+"''>");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group '>");
//        out.println("                   <label for='firstname' class='col-sm-2 control-label'>是否包邮  </label>");
//        out.println("                   <div class='col-md-6'>");
//        if (phone.getFree().equals(1)){
//            out.println("                       <label class='radio-inline'>");
//            out.println("                           <input type='radio' name='optionsRadiosinline' id='optionsRadios3' value='option1' checked>包邮  </label>");
//            out.println("                       <label class='radio-inline'>");
//            out.println("                           <input type='radio' name='optionsRadiosinline' id='optionsRadios4' value='option2'>不包邮  </label>");
//        }else{
//            out.println("                       <label class='radio-inline'>");
//            out.println("                           <input type='radio' name='optionsRadiosinline' id='optionsRadios3' value='option1'>包邮  </label>");
//            out.println("                       <label class='radio-inline'>");
//            out.println("                           <input type='radio' name='optionsRadiosinline' id='optionsRadios4' value='option2' checked>不包邮  </label>");
//        }
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("               <div class='form-group'>");
//        out.println("                   <div class='col-sm-offset-3 col-sm-10'>");
//        out.println("                       <button type='submit' class='btn btn-info' style='margin-right: 100px'>确认修改  </button>");
//        out.println("                       <button type='button' class='btn btn-danger'>取消修改  </button>");
//        out.println("                   </div>");
//        out.println("               </div>");
//        out.println("           </form>");
//        out.println("       </div>");
//        out.println("   </div>  <!-- /.modal-content -->");
//        out.println("</div>  <!-- /.modal -->");
//        out.println("</div>");
//        out.println("<!--修改手机信息模态框end-->");

        

        out.println("<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->");
        out.println("<script src='" + req.getContextPath() + "/plugins/jquery/jquery.min.js'></script>");
        out.println("<!--引入bootstrap的js文件-->");
        out.println("<script src='" + req.getContextPath() + "/plugins/bootstrap/js/bootstrap.js'></script>");
        out.println("<script src='" + req.getContextPath() + "/js/phone.js'></script>");
        out.println("</body>");

        out.println("</html>");
    }
}
